<template>
    <div>
        <!-- 页头 -->
        <x-header :left-options="{showBack: false}">BMP</x-header>
        <!-- 路由切换 -->
        <div class="container">
            <router-view></router-view>
        </div>        
        <!-- 底部导航栏 -->
        <tabbar>
            <tabbar-item link="/init/home" selected>
                <span slot="icon" class="icon-color"><img src="/static/img/home.svg"></span>
                <span slot="label"><span >首页</span></span>
            </tabbar-item>
            <tabbar-item show-dot link="/init/message">
                <span slot="icon" class="icon-color"><img src="/static/img/production.svg"></span>
                <span slot="label"><span >消息</span></span>
            </tabbar-item>
            <tabbar-item link="/init/jop">
                <span slot="icon" ><img src="/static/img/progress.svg"></span>
                <span slot="label">工作</span>
            </tabbar-item>
            <tabbar-item badge="2" link="/init/personal">
                <span class="icon-color" slot="icon"><img src="/static/img/message.svg"></span>
                <span slot="label"><span >我</span></span>
            </tabbar-item>
        </tabbar>
    </div>
</template>
<script>
import { Tabbar, TabbarItem, XHeader  } from 'vux'

export default {
  components: {
    Tabbar,
    TabbarItem,
    XHeader
  }
}
</script>
<style lang="less" scoped>
[data-v-87212900]{
    font-size: 14px;
}
.container{
    // padding: 10px;
    // padding-right: 10px;
    height: 100%;
    width: 100%;
    // display: flex;
}
</style>
